class Enlarge
{
    constructor (el,options = {})
    {
        this.el = document.querySelector(el)
        this.imgObj = this.el.querySelector('.img')
        this.maskObj = this.el.querySelector('.mask')
        this.enlargeObj = this.el.querySelector('.enlarge')
        this.options = options
        //默认调用
        this.init()
    }

    init()
    {
        this.overout()
        this.enlargeSetWH()
        this.maskMove()
        this.maskBg()
        this.imgChange()
    }

    maskBg()
    {
        this.maskObj.style.background = this.options.maskBg
    }

    overout()
    {
        this.imgObj.onmouseover = () => this.maskObj.style.display = this.enlargeObj.style.display = 'block'
        this.imgObj.onmouseout = () => this.maskObj.style.display = this.enlargeObj.style.display = 'none'
    }

    getStyle(tagObj, attrName) 
    {
        if (window.getComputedStyle)
        {
            return window.getComputedStyle(tagObj)[attrName]
        } else {
            return tagObj.currentStyle[attrNamea] 
        }
    }

    enlargeSetWH()
    {
        let maskW = parseInt(this.getStyle(this.maskObj, 'width'))
        let maskH = parseInt(this.getStyle(this.maskObj, 'height'))

        let enlarge = this.getStyle(this.enlargeObj, 'background-size')
        let enlargeW = parseInt( enlarge.split(' ')[0] )
        let enlargeH = parseInt( enlarge.split(' ')[1] )

        let imgW = this.imgObj.clientWidth
        let imgH = this.imgObj.clientWidth

        this.enlargeObj.style.width = maskW * (enlargeW / imgW) + 'px'
        this.enlargeObj.style.height = maskH * (enlargeH / imgH)  + 'px'
    }

    maskMove()
    {
        this.imgObj.onmousemove = (evt) => {
            let e = evt || window.event 

            let x = e.pageX - this.el.offsetLeft - this.maskObj.offsetWidth/2
            let y = e.pageY - this.el.offsetTop - this.maskObj.offsetHeight/2

            if (x < 0) x = 0
            if (y < 0) y = 0

            let maxX = this.imgObj.offsetWidth - this.maskObj.offsetWidth
            let maxY = this.imgObj.offsetHeight - this.maskObj.offsetHeight

            if (x > maxX) x = maxX
            if (y > maxY) y = maxY

            this.maskObj.style.left = x + 'px'
            this.maskObj.style.top = y + 'px'

            //同步放大镜
            this.tbEnlarge(x,y)
        }
    }

    tbEnlarge (x,y)
    {
        //获取 =>  放大镜框 ： mask框 = 比例值
        //公式 =>  比例值 * maskMove 中的 鼠标移动位置
        let enlargeW = parseFloat(this.getStyle(this.enlargeObj,'width'))
        let enlargeH = parseFloat(this.getStyle(this.enlargeObj,'height'))

        let maskW = parseInt(this.getStyle(this.maskObj,'width'))
        let maskH = parseInt(this.getStyle(this.maskObj,'height'))

        let left = (enlargeW/maskW) * x
        let top = (enlargeH/maskH) * y

        this.enlargeObj.style.backgroundPosition = `-${left}px -${top}px `

    }

    imgChange()
    {
        let ulLiObj = this.el.querySelectorAll('ul li')
        ulLiObj.forEach((item,i) => {
            item.onclick = () => {
                this.imgObj.style.backgroundImage = `url(./imgs/${i+1}.jpg)`
                this.enlargeObj.style.backgroundImage = `url(./imgs/${i+1}.big.jpg)`
                this.el.querySelector('ul li.active').className = ''
                ulLiObj[i].className = 'active'
            }
        })
    }
}